<template>
  <div class="box">
    <div class="main pb10">
      <div class="condition">
        <div class="f aic mb30">
          <div class="f16 bold">科目：</div>
          <div class="f condition-item">
            <div
              @click="changeSubject(0)"
              :class="{ active: subjectIndex == 0 }"
            >
              全部
            </div>
            <div
              @click="changeSubject(1)"
              :class="{ active: subjectIndex == 1 }"
            >
              行测
            </div>
            <div
              @click="changeSubject(2)"
              :class="{ active: subjectIndex == 2 }"
            >
              申论
            </div>
            <div
              @click="changeSubject(3)"
              :class="{ active: subjectIndex == 3 }"
            >
              面试
            </div>
            <div
              @click="changeSubject(4)"
              :class="{ active: subjectIndex == 4 }"
            >
              高等数学
            </div>
            <div
              @click="changeSubject(5)"
              :class="{ active: subjectIndex == 5 }"
            >
              解剖学
            </div>
          </div>
        </div>
        <div class="f aic mb30">
          <div class="f16 bold">类型：</div>
          <div class="f condition-item">
            <div @click="changeType(0)" :class="{ active: typeIndex == 0 }">
              全部
            </div>
            <div @click="changeType(1)" :class="{ active: typeIndex == 1 }">
              报岗指导
            </div>
            <div @click="changeType(2)" :class="{ active: typeIndex == 2 }">
              理论讲解
            </div>
            <div @click="changeType(3)" :class="{ active: typeIndex == 3 }">
              强化专项
            </div>
          </div>
        </div>
        <div class="f aic">
          <div class="f16 bold">状态：</div>
          <div class="f condition-item">
            <div @click="changeTestType(1)" :class="{ active: typeIndex == 0 }">
              已考试
            </div>
            <div @click="changeTestType(2)" :class="{ active: typeIndex == 1 }">
              未考试
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main pt50">
    <div class="f fw">
      <div
        v-for="(item, index) in testList"
        :key="index"
        class="course-item pointer"
        @click="goPath('/answer')"
      >
        <img :src="getImageUrl(item.imgUrl)" alt="" width="100%" height="152" />
        <div class="f14 pl10 pr10 pt13 pb20">
          <div class="mb10 tem">{{ item.name }}</div>
          <div class="course-content tem3">
            {{ item.synopsis }}
          </div>
          <div class="course-content mt10 mb15">
            总分 · {{ item.totalScore }}分
          </div>
          <div class="f jcsb aic">
            <div class="C0088FF" @click="goPath('/report')">报告查看</div>
            <el-tag
              type="danger"
              color="#F01414"
              effect="dark"
              @click="goPath('/answer')"
            >
              开始练习
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="f column aie">
      <el-pagination
        v-model:current-page="page.index"
        v-model:page-size="page.size"
        :page-sizes="[8, 16, 50, 100]"
        layout=" prev, pager, next, jumper"
        :total="100"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { courseList, testList } from "../home/course";
import { getImageUrl } from "@/utils/index";
import { getPaperList } from "@/api/home";
import { onMounted } from "vue";

const route = useRouter();

const subjectIndex = ref(0);
const typeIndex = ref(0);
const testTypeIndex = ref(0);
const examList = ref([]);
const page = ref({
  index: 1,
  size: 8,
});
onMounted(() => {
  getPaperListData();
});

const getPaperListData = () => {
  getPaperList({ examPublishStatus: 2 }).then((res) => {
    examList.value = res.rows;
  });
};

const changeSubject = (type) => {
  subjectIndex.value = type;
};
const changeType = (type) => {
  typeIndex.value = type;
};
const changeTestType = (type) => {
  testTypeIndex.value = type;
};

const goPath = (path) => {
  route.push(path);
};
</script>
<style lang="scss" scoped>
.box {
  background: #f5f7fa;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 80px 0 15px;
  .condition {
    font-size: 14px;
    padding: 40px 0 30px;
    .condition-item {
      color: #646464;
      > div {
        padding: 7px 8px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
        &:hover {
          color: #f01414;
        }
        &.active {
          background: #f01414;
          color: #fff;
        }
      }
    }
  }

  // 内容
  .course-item {
    width: 272px;
    // height: 282px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #6e747a;
    margin-right: 22px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px 3px #e8e8e8;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .course-content {
      line-height: 24px;
      opacity: 0.7;
    }
    .C0088FF {
      color: #0088ff;
    }
    &:hover {
      box-shadow: 0 0 5px 2px #cfcfcf;
    }
  }
}
</style>
